<template>
  <div>
    <h1>世界</h1>

    <ProTable
      :pagination="false"
      :request="request"
      :tree-props="{ hasChildren: 'hasSon' }"
      :load="load"
      lazy
      row-key="id"
    >
      <template #default>
        <el-table-column label="Id" prop="id"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
      </template>
    </ProTable>
  </div>
</template>

<script>
import ProTable from "@/components/pro-table/index.vue";

export default {
  components: {
    ProTable,
  },

  data() {
    return {
      list: [
        {
          id: 1,
          name: "张三",
          hasSon: true,
        },
        {
          id: 2,
          name: "里斯",
        },
      ],
    };
  },

  methods: {
    request() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            success: true,
            list: this.list,
            total: 1,
          });
        }, 1000);
      });
    },

    // 加载子级的函数
    //    row     - 点击的数据
    //    node    - 点击的节点数据
    //    resolve - 完成的函数，当获取到数据之后，使用 resolve() 将数据传递出去
    load(row, node, resolve) {
      setTimeout(() => {
        const children = [
          { id: row.id + "-1", name: row.name + "~", hasSon: true },
          { id: row.id + "-2", name: row.name + "!" },
        ];

        resolve(children);
      }, 1000);
    },
  },
};
</script>
